<template>
	<view class="box">
		<view class="row">
			<view class="icon" >
				<uniDataSelect
				 v-model="houseKey" :localdata="houseKeyRange" @change="changehouseType"
					:clear="false"></uniDataSelect>
			</view>
				<!-- <u-icon name="search" label="搜索" size="20"></u-icon> -->
				<u-search placeholder="请输入关键字" v-model="keyword" clearabled height="30" bgColor="#f3f3f3" @custom="custom"></u-search>
		</view>  
<!-- 	<view class="card">
		<view class="card_row">
			<view class="card_label">
				本月
			</view>
			<u-icon name="calendar" size="26" labelColor="#b9b9b9"></u-icon>
		</view>
		<view class="row_">
			<view class="">
				总支出 ￥0.00
			</view>
			<view style="margin-left: 30rpx;">
				总入账 ￥0.00
			</view>
		</view>
	</view> -->
	<view class="title">
		账单列表
	</view>
	<view :class="['card', tapActive == index &&  isRotating ?  'rotating' : '', ]" v-for="(item,index) in list"
		:key="index" @touchstart="touchstart(index)" @touchend="touchstart(index)" @click="detail(item)">
		<view class="card_row">
			<view class="card_label">
				{{item.name}}
			</view>
			<view>
				+{{item.bill_amount || '0'}}
			</view>
		</view>
		<view class="community">
			{{item.building_number}}幢/栋{{item.unit_number}}单元{{item.ventricle_number}}室{{item.room_number}}房
		</view>
		<view class="card_row">
			<view class="tag_box">
				<view class="tag">
					{{item.collection_channel || '线下支付'}}
				</view>
				<view class="tag" v-if="item.pay_status ==1">
					已支付
				</view>
				<view class="tag" v-if="item.pay_status ==0">
					未支付
				</view>
			</view>
			<view class="tiem">
				{{item.bill_period}}
			</view>
		</view>
	</view>
	<view style="margin-top: 120rpx;" v-if="list.length==0">
		<u-empty mode="data" text="暂无账单数据"></u-empty>
	</view>
	<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import uniDataSelect from "@/uni_modules/uni-select/index/index.vue";
	import {getSelectHouseBill} from "@/api/my/index.js";
	export default {
		components: {
			uniDataSelect
		},
		data() {
			return {
				isRotating: false,
				pay_status:'',
				tapActive: 0,
				houseKey: '',
				keyword:"",
				value: '',
				houseKeyRange: [
					{
						value: 0,
						text: "未支付"
					},
					{
						value: 1,
						text: "已支付"
					} 
				],
				list: []
			}
		},
		mounted() {
			this.selectHouseBill()
		},
		methods: {
			//搜索
			custom(){
				this.selectHouseBill()
			},
			changehouseType(value){
				this.value = value;
				this.selectHouseBill()
			},
			async selectHouseBill(){
				const res = await getSelectHouseBill({
					billState: '', //账单状态（1已逾期）
					payStatus:this.value, //支付状态（1已支付）
					communityName: this.keyword //小区名称字符
				})
				if(res.data.code == 200){
					this.list = res.data.data
				
				}else{
					this.$refs.uToast.show({
						message: res.data.msg,
						type: 'error'
					})
				}
			},
			touchstart(index) {
				this.tapActive = index
				this.isRotating = !this.isRotating
			},
			detail(item) {
				uni.navigateTo({
					url: './billDetail?id='+ item.id,
					animationType: this.animation.type,
					animationDuration: this.animation.time
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	@import "~@/styles/index.scss";
	@import "~@/styles/global.scss";

	.rotating {
		opacity: 0.5;
	}

	.box {
		width: 100%;
		height: 100%;
		min-height: 100vh;
		background-color: $pagebgc;

		.row {
			@include flexBetween;
			background-color: #fff;
			color: #5e5e5e;
			font-size: 32rpx;
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			border-bottom: #cbcbcb solid 1rpx;
			.icon{
				margin-right: 20rpx;
			}
		}

		.title {
			padding: 30rpx;
			font-size: 32rpx;
			font-weight: bold;
		}

		.card {
			width: 100%;
			box-sizing: border-box;
			background-color: #fff;
			padding: 30rpx;
			margin-bottom: 10rpx;
			.community {
				font-size: 32rpx;
				font-weight: bold;
				margin: 30rpx 0;
			}

			.card_row {
				@include flexBetween;

				.tag_box {
					display: flex;
					align-items: center;
					margin: 30rpx 0;

					.tag {
						margin: 0 10rpx;
						background-color: #fce1e1;
						color: #6f6f6f;
						font-size: 24rpx;
						padding: 5rpx 10rpx;
						border-radius: 5rpx;
					}
				}

				.tiem {
					font-size: 28rpx;
				}

				.card_label {
					font-size: 32rpx;
					font-weight: bold;
				}
			}

			.row_ {
				color: #5e5e5e;
				margin: 60rpx 0;
				display: flex;
				align-items: center;
				font-size: 32rpx;
			}
		}
	}
</style>